<!--
 * @Author: sundl
 * @Date: 2021-04-08 16:13:29
 * @project: 天津YQ平台
-->
<template>
  <el-row class="wrap">
    <module-card>
      <template v-slot:header>关联案事件人员信息列表</template>
      <search-page ref="searchPage" :config="relateEventInfoConfig" :requestFcun="caseInfoSearchByGlFlow">
        <template v-slot:filter>
          <el-form label-width="70px">
            <dg-row :span="24" type="flex">
              <dg-col :span="8">
                <el-form-item label="关键词：">
                  <el-input
                    v-model="filter.gjc"
                    @input="onSearch"
                    class="filter-input"
                    placeholder="请输入关键词"
                    collapse-tags
                  ></el-input>
                </el-form-item>
              </dg-col>
              <dg-col :span="5" style="margin-left: -20px;">
                <el-form-item label="">
                  <dg-button type="primary" ghost @click="onExport">导出</dg-button>
                </el-form-item>
              </dg-col>
            </dg-row>
          </el-form>
        </template>

        <template v-slot:sfzh="{ row }">
          <dg-button v-if="row.sfzh" type="text" @click="onRouteArchive(row)">{{ row.sfzh }}</dg-button>
          <span v-else>-</span>
        </template>

        <template v-slot:factor-info="{ row }">
          <div class="factor">
            <p>联系电话：{{ row.ryysLxdh | filterText }}</p>
            <p>车辆号：{{ row.ryysClh | filterText }}</p>
            <p>网名：{{ row.ryysWm | filterText }}</p>
          </div>
        </template>
      </search-page>
    </module-card>
  </el-row>
</template>

<script>
import { relateEventInfoConfig } from './config';
import { caseInfoSearchByGlFlow, exportUserInfo } from '@/api/common';
import { handleFilestream, routeToArchive } from '@/utils/data-utils';

export default {
  name: 'people-info-list',
  components: {},
  data() {
    return {
      caseInfoSearchByGlFlow,
      relateEventInfoConfig,
      filter: {}
    };
  },
  computed: {
    flowId() {
      return this.$route.params.id || '';
    }
  },
  methods: {
    onSearch(value) {
      this.$refs.searchPage.setFilterCondition({
        value,
        key: 'gjc'
      });
    },
    onRouteArchive(row) {
      routeToArchive(row.sfzh);
    },
    onExport() {
      const params = {
        ids: '',
        page: 0,
        size: 10,
        sort: {},
        metadata: JSON.stringify(relateEventInfoConfig.exportColumns),
        searchCondition: JSON.stringify([
          { name: 'flow_Id', op: '=', value: this.flowId, type: '', format: '' },
          { name: 'export_type', op: '=', value: 'glasjryxx', type: '', format: '' }
        ])
      };
      exportUserInfo(params).then(res => {
        const fileName = '关联案事件人员信息列表' + this.$moment(new Date().getTime()).format('YYYY-MM-DD') + '.xlsx';
        handleFilestream(res, fileName);
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.searchPage &&
        this.$refs.searchPage.fecthData([
          {
            name: 'flow_Id',
            op: '=',
            value: this.flowId,
            type: '',
            format: ''
          }
        ]);
    });
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  &-title {
    font-weight: bolder;
  }
}
.form-item {
  .label {
    text-align: right;
    min-width: 7em;
  }
}
</style>
